<template>
    <div class="cheng">
            <div class="top"><img src="@/assets/北京.png" alt=""></div>
    </div>
    <div class="touxiang">
    <img src="@/assets/y1.png" alt="" class="dx">
    <span class="yes">
小楠楠

    </span>
    </div>
    <div class="fb">
        <h3 class="okok">他发布的病友圈</h3>

    </div>

        <div class="yui">
        <h2>急性肠胃炎怎么办</h2>
        <p>2018-12-28 12:28</p>
        <p class="cu">
   去年肠胃发炎了，经过输液，吃药好了。现在的问题是:不
能吃油腻的东西了，炒菜放的油多了也不行，吃了就感觉恶
心，想呕吐。但是吐不出来。请问这是什么情况
        </p>
        <div class="zhan">
<div class="dwdw">          收藏 3
建议 109</div>
        </div>
    </div>
     <div class="yui">
        <h2>急寻:面神经炎的治疗方法</h2>
        <p>2018-12-28 12:28</p>
        <p class="cu">
            周围性神经炎，下巴斜的，口齿不清，眼睛闭合不了，右边脸明显动不了
        </p>
        <div class="zhan">
<div class="dwdw">            收藏 3
建议 109</div>
        </div>
    </div>
     <div class="yui">
        <h2>急寻:面神经炎的治疗方法</h2>
        <p>2018-12-28 12:28</p>
        <p class="cu">
            周围性神经炎，下巴斜的，口齿不清，眼睛闭合不了，右边脸明显动不了
        </p>
        <div class="zhan">
<div class="dwdw">            收藏 3
建议 109</div>
        </div>
    </div>
        <div class="yui">
        <h2>急性肠胃炎怎么办</h2>
        <p>2018-12-28 12:28</p>
        <p class="cu">
   去年肠胃发炎了，经过输液，吃药好了。现在的问题是:不
能吃油腻的东西了，炒菜放的油多了也不行，吃了就感觉恶
心，想呕吐。但是吐不出来。请问这是什么情况
        </p>
        <div class="zhan">
<div class="dwdw">          收藏 3
建议 109</div>
        </div>
    </div>
</template>
<script>



</script>
<style scoped lang="scss">


.cu{
    font-size:.1rem; //.2rem * 0.5，字体大小缩小50%
}
.dwdw{
    position: absolute;
    right: 0;
    bottom: 5%; // 5% * 0.5，位置的百分比缩小50%
}
.zhan{
    width: 100%;
    height:.8rem; //.8rem * 0.5，高度缩小50%
}
.yui{
    width: 100%;
    position: relative;
    border-bottom:.2rem solid #ccc; //.2rem * 0.5，边框宽度缩小50%
    h2,p{
        margin-left:.5rem; //.5rem * 0.5，左边距缩小50%
    }
}
.fb{
    width: 100%;
    height: 1rem; // 1rem * 0.5，高度缩小50%
    background-color: #fff;
    border-bottom:.2rem solid #dedddd; //.2rem * 0.5，边框宽度缩小50%
   .okok{
        margin-left:.6rem; //.6rem * 0.5，左边距缩小50%
        border-left:.1rem solid aqua; //.1rem * 0.5，左边框宽度缩小50%
        line-height:.6rem; //.6rem * 0.5，行高缩小50%
        padding:.1rem; //.1rem * 0.5，内边距缩小50%
    }
}
.yes{
    position: absolute;
    top: 10%; // 10% * 0.5，顶部位置百分比缩小50%
    left: 28%; // 28% * 0.5，左边位置百分比缩小50%
    font-size: 17.5px; // 35px * 0.5，字体大小缩小50%
}
.dx{
    width:1.5rem; // 1.5rem * 0.5，宽度缩小50%
    height:1.5rem; // 1.5rem * 0.5，高度缩小50%
    border-radius: 50%;
    position: relative;
    top: -40%; // -40% * 0.5，顶部相对位置百分比缩小50%
    left: 10%; // 10% * 0.5，左边相对位置百分比缩小50%
}
.cheng{
    width: 100%;
    height: 6rem; // 6rem * 0.5，高度缩小50%
    position: relative;
}
.top{
    width: 100%;
    height: 6rem; // 6rem * 0.5，高度缩小50%
    background-color: yellow;
    position: absolute;
    top: 0;
    left: 0;
    img{
        width: 100%;
        height: 100%;
    }
}
.touxiang{
    width: 100%;
    height: 1.5rem; // 1.5rem * 0.5，高度缩小50%
    background-color: #fff;
    border-bottom:.1rem solid #dedddd; //.2rem * 0.5，边框宽度缩小50%
    position: relative;
}

</style>
